<script setup lang="ts">
import { h, onMounted, reactive, useTemplateRef } from 'vue'
import XyIcon from '@/components/XyIcon'

const formList = reactive<FormList>([
  {
    label: '姓名',
    prop: 'name',
    type: 'input'
  },
  {
    label: '年龄',
    prop: 'age1',
    type: 'input'
  },
  {
    label: '性别',
    prop: 'sex1',
    type: 'select',
    data: [
      { label: '男', value: 1 },
      { label: '女', value: 2 }
    ]
  },
  {
    label: '年龄',
    prop: 'age1',
    type: 'input'
  },
  {
    label: '性别',
    prop: 'sex1',
    type: 'select',
    data: [
      { label: '男', value: 1 },
      { label: '女', value: 2 }
    ]
  },
  {
    label: '年龄',
    prop: 'age1',
    type: 'input'
  },
  {
    label: '性别',
    prop: 'sex1',
    type: 'select',
    data: [
      { label: '男', value: 1 },
      { label: '女', value: 2 }
    ]
  },
  {
    label: '日期',
    prop: 'date1',
    type: 'date'
  },
  {
    label: '日期1',
    prop: 'date11',
    type: 'date',
    colspan: 2
  },
  {
    label: '性别',
    prop: 'sex1',
    type: 'select',
    data: [
      { label: '男', value: 1 },
      { label: '女', value: 2 }
    ]
  },
  {
    label: '日期',
    prop: 'date1',
    type: 'date'
  },
  {
    label: '日期1',
    prop: 'date11',
    type: 'date'
  }
])
const formList1 = reactive<FormList>([
  {
    label: '标题',
    type: 'card.divider'
  }
]).concat(...formList)
const submitForm = async ({ formData, setBtnLoading }: FormEventParams) => {
  setBtnLoading(true)
  await new Promise(r => setTimeout(r, 500))
  setBtnLoading(false)
  console.log(formData)
}
const addFormRef = useTemplateRef('addFormRef')
onMounted(async () => {
  await new Promise(r => setTimeout(r, 500))
  addFormRef.value?.formRef?.validate((a, b) => {
    console.log(a, b)
  })
})

const buttons = {
  submitIcon: h(XyIcon, { icon: 'mingcute:search-ai-fill' }),
  expandText: '',
  collapseText: '',
  expandCollapseIcon: h(XyIcon, { icon: 'lets-icons:expand-down-double' })
}
const resetForm = () => {
  console.log('重置')
}
</script>

<template>
  <p>标题位置</p>
  <XySearchForm
    ref="addFormRef"
    :formList="formList"
    :buttons="buttons"
    isCard
    labelPosition="top"
    @submit-form="submitForm"
    @reset-form="resetForm"
  />
  <XySearchForm :formList="formList" isCard :buttons="buttons" labelPosition="right" />
  <XySearchForm :formList="formList" isCard labelPosition="inside" />
  <p>自适应</p>
  <XySearchForm :formList="formList" isCard labelPosition="inside" minWidth="270" />
  <p>间距调整</p>
  <XySearchForm :formList="formList" isCard :rowGap="10" columnGap="30" />
  <p>带标题</p>
  <XySearchForm :formList="formList1" labelPosition="inside" />
</template>
<style scoped lang="scss">
p {
  margin: 10px 0;
}
</style>
